<template>
    <!-- /e jtbsm-header -->
    <div>

        <div class="mod-index-wrap">

            <!-- S 主屏背景 -->
            <div id="banner" data-rsc="9481" style=" background: linear-gradient(177deg, #FF812D 0%, #E02020 100%);height: 60px;
            z-index: 99;">

            </div>
            <!-- E 主屏背景 -->

            <div class="mod-index-main" id="js-main" style="height: 0;"></div>
        </div>

        <div class="mod-index-list">
            <div class="wrap-recGameLive" id="wrap-recGameLive">
                <!-- 猜你喜欢 -->
                <div v-for="(dl,index) in dataList">
                    <div class="live-box j_index-live-box" v-for="(dl2,index2) in dl.dataList">
                        <div class="box-hd">
                            <h2 class="title">
                                
                                <a class="j_index-game-title" data-gid="1" :data-gname="dl2.className" href="javascript:void(0)"
                                    v-if="dl2.childClassName=='' || dl2.childClassName==null">{{dl2.className}}</a>

                                <a class="j_index-game-title" data-gid="1" :data-gname="dl2.childClassName" href="javascript:void(0)"
                                    v-else>{{dl2.childClassName}}</a>
                            </h2>

                            <ul class="more-list" v-if="index==0 && index2==0 && (dl2.childClassName=='' || dl2.childClassName==null)">

                                <li class="j_anchor_label " data-lp="1691592144"
                                    v-for="childItem in dl.childClassNameList" >
                                    <a class=" grey" href="javascript:void(0)"
                                        @click="getData(childItem.split('-')[1], null, false)">{{childItem.split('-')[0]}}</a>
                                </li>

                            </ul>
                        <ul class="more-info">
                            <li>
                                <a class="j_index-live-more" :data-gid="index" :data-gname="dl.className" href="javascript:void(0)" @click="moreLiveInfo(dl.pathName,dl2.childPathName)"  v-if="currentPath!=dl2.childPathName && dl2.childPathName!=null">更多
                                    <i class="index-more-icon"></i>
                                </a>
                            </li>
                        </ul>

                        </div>
                        <div class="box-bd">
                            <ul class="index-list clearfix j_live-list " style="max-height:430px">
                                <li class="game-live-item" gid="1" data-lp="1033759016"
                                    v-for="(item,index) in dl2.dataList"
                                    @click="viewDetail(item.liveLink,item.id,item.labelName)" :key="index">

                                    <a href="javascript:void(0)" class="video-info " target="_blank">
                                        <img class="pic" :data-original="item.imgBase" :src="item.imgBase"
                                            data-default-img="338x190" :alt="item.hostName" :title="item.hostName">

                                        <em class="tag tag-recommend">{{item.labelName}}</em>

                                        <div class="item-mask"></div>
                                        <i class="btn-link__hover_i"></i>

                                        <!-- <p class="tag-right">
                                            <em class="tag-blue" v-if="item.isLiveing">直播中...</em>
                                        </p> -->
                                    </a>
                                    <a href="javascript:void(0)" class="title" target="_blank"
                                        :title="item.liveContent">{{item.liveContent}}</a>
                                    <span class="txt">
                                        <span class="avatar fl">
                                            <img :data-original="item.imgBase" :src="item.imgBase"
                                                data-default-img="84x84" :alt="item.hostName" :title="item.hostName">
                                            <i class="nick" :title="item.hostName">{{item.hostName}}</i>
                                        </span>

                                        <span class="num"><i class="num-icon"></i><i class="js-num"> </i></span>
                                    </span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="video-funny" id="video-funny"></div>
        </div>

        <div>
            <p v-if="loading" class="p-class p-loading"><i class="el-icon-loading"></i> 主播积极准备中... </p>
            <p v-if="noMore" class="p-class">没有更多了</p>
        </div>

    </div>
</template>
<script>
    // import $ from 'jquery';
    export default {
        data() {
            return {
                isScroll: true,
                pageNum: 1,
                pageSize: 10,
                totalPages: 0,
                totals: 0,
                dataList: [],
                loading: false, 
                searchMsg: "",
                currentPath: '',
                toRouter:"",
                fromRouter:""

            }
        },
        computed: {
            noMore() {
                return this.pageNum >= this.totalPages && !this.loading
            },
            disabled() {
                return this.loading || this.noMore
            },
        },
        watch: {
            //切换路由监
            '$route'(toRouter, fromRouter) {
                this.toRouter = toRouter.params.pathMatch;
                this.currentPath = toRouter.params.pathMatch;
                this.searchMsg=toRouter.query.searchMsg;
                document.body.scrollTop=document.documentElement.scrollTop=0;
                this.getData(this.currentPath, this.searchMsg,false);//初始化页面加载
            }
        },
        mounted() {
            window.addEventListener("scroll", this.handleScroll);//滚动监听

            this.currentPath = this.$router.history.current.params.pathMatch

            this.getData(this.currentPath, this.searchMsg,false);//初始化页面加载

        },
        methods: {
           getData(className, searchMsg, isScroll2) {
               
                if (this.isScroll) {
                    this.dataList = [];
                }
                if (!isScroll2) {
                    this.pageNum = 1;
                }
                this.loading = true;

                let params = {};
                params.pageNum = this.pageNum;
                params.pageSize = this.pageSize;

                if(searchMsg==null || searchMsg==""){
                    params.className = className == 'home' ? undefined : className;
                }
                params.searchMsg = searchMsg;

                this.$axios.post('/api/projectApi/getMoreList', params).then((res) => {

                    if (res.data.code == "0") {
                        if (this.pageNum == 1) {
                            this.dataList = res.data.data;
                        }
                        else {

                            //滚动加载时 将结果拼接在dataList中
                            var dataList2=[];

                            var res1=res.data.data;
                            for (let i = 0; i < res1.length; i++) {
                                var res2=res1[i].dataList;
                                for(let j=0;j<res2.length;j++){
                                    var res3=res2[j].dataList
                                    for(let k=0;k<res3.length;k++){
                                        var res4=res3[k]
                                        dataList2.push(res4)
                                    }
                                }
                            }

                            for (var i = 0; i < this.dataList.length; i++) {
                                for(var j=0;j<this.dataList[i].dataList.length;j++){
                                    if(this.dataList[i].dataList.length-1==j){
                                        for(var k=0;k<dataList2.length;k++){
                                            this.dataList[i].dataList[j].dataList.push(dataList2[k])
                                        }
                                    }
                                }
                            }

                        }
                        this.loading = false;
                        this.isScroll = true;

                        this.totals = res.data.totalPages;
                        this.totalPages = ((this.totals + this.pageSize - 1) / this.pageSize).toFixed(0);
console.log(this.totalPages)

                    }
                    else {
                        this.$message.error(res.data.message)
                    }
                }, (err) => {
                    this.isScroll = true;

                }).then(() => {

                }, (err) => {
                    this.loading = false;
                    this.isScroll = true;

                })
            },
            //滚动事件的监听处理
            handleScroll() {

                var scr = document.documentElement.scrollTop || document.body.scrollTop; // 向上滚动的那一部分高度
                var clientHeight = document.documentElement.clientHeight; // 屏幕高度也就是当前设备静态下你所看到的视觉高度
                var scrHeight = document.documentElement.scrollHeight || document.body.scrollHeight; // 整个网页的实际高度，兼容Pc端
console.log(scr + clientHeight + 10 , scrHeight , this.isScroll , !this.noMore  )
                if ((scr + clientHeight + 10 >= scrHeight) && scrHeight>700 && this.isScroll && !this.noMore && (this.searchMsg==null || this.searchMsg=="")) {
                
                    if (this.pageNum >= this.totalPages) {
                        return;
                    }
                    else {
                        this.isScroll = false;
                        this.pageNum++;
                        console.log(this.pageNum)
                        this.getData(this.currentPath, this.searchMsg, true);
                    }
                }

            },
            //点击记录点击量
            viewDetail(href, id, labelName) {
                // //记录连接点击量
                this.recordHits(id, labelName);

                window.open(href, 'top');

            },
            //记录点击量
            recordHits(id, labelName) {
                let params = {};
                params.id = id;
                params.labelName = labelName;
                params.ip = ('IP地址:' + returnCitySN["cip"] + ', CID:' + returnCitySN["cid"] + ', 地区:' + returnCitySN["cname"] + ",浏览器版本:" + getBrowserInfo());

                console.log(params)
                this.$axios.post('/api/projectApi/recordHits', params).then((res) => {
                    if (res.data) {
                    }
                }, (err) => {
                }).then(() => {

                }, (err) => {
                })
            },
            moreLiveInfo(pathName1,pathName2){
                
                this.$router.push({
                    path: pathName2
                });
            }
        }
    }
</script>

<style scoped>
    .p-loading {

        color: #ed4856;
        font-size: 16px;
    }

    .w-980 .mod-index-list,
    .w-980 .mod-index-list .game-extend {
        width: 999px;
        background: #fff;
        border-radius: 10px;
    }

    .w-980 .game-live-item {
        width: 220px;
    }

    .live-box {
        padding: 30px 30px 5px;
        /* margin-bottom: 20px; */
    }

    .p-class {
        text-align: center;
        padding: 20px;
    }

    .jtbsm2-header.jtbsm2-header-style-skr {
        position: fixed;
    }
</style>